<!DOCTYPE html>
<html>
	
	
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	
	<body>
		
		<h1>标题信息</h1>
		<div>
			<p>段落1段落1段落1段落1段落1段落1段落1</p>
			<p>段落2段落2<p>
			<p>段落2段落3<p>
		</div>
		<div>
			节点名字nodeName:<input type="text" id="txtNodeName" /><br />
			节点类型nodeType:<input type="text" id="txtNodeType"  /><br />
			节点值nodeValue:<input type="text" id="txtNodeValue"  /><br />
			节点的子元素数量:<input type="text" id="txtChildCount"  /><br />
		</div>
		<button onclick="show(1)">访问根节点</button><br />
		<button onclick="show(2)">访问当前节点的大儿子</button><br />
		<button onclick="show(3)">访问当前节点的小儿子</button><br />
		<button onclick="show(4)">访问当前节点的前一个兄弟</button><br />
		<button onclick="show(5)">访问当前节点的后一个兄弟</button><br />
		
		<script type="text/javascript">
			
			var curNode;
			
			function show(op)
			{
				if(op=="1")
				{
					curNode = document.documentElement; // 也就是html节点
				}
				else if(op=="2")
				{
					curNode = curNode.firstChild;
				}
				else if(op=="3")
				{
					curNode = curNode.lastChild; 
				}
				else if(op=="4")
				{
					curNode = curNode.previousSibling;
				}
				else if(op=="5")
				{
					curNode = curNode.nextSibling; 
				}
				
				// 显示节点的信息
				txtNodeName.value = curNode.nodeName;
				txtNodeType.value = curNode.nodeType;
				txtNodeValue.value = curNode.nodeValue;
				txtChildCount.value = curNode.childNodes.length;
			}
		</script>
	</body>
	
	
</html>